<template>
  <div class="bg-white rounded-lg shadow-sm p-6">
    <div class="flex justify-between items-center mb-4">
      <h3 class="font-medium text-gray-800">简历完整度</h3>
      <div class="flex items-center">
        <span class="text-primary font-medium text-lg">{{ completeness }}</span>
        <span class="text-primary font-medium">/100</span>
      </div>
    </div>
    
    <div class="relative h-2.5 bg-gray-100 rounded-full mb-6 overflow-hidden">
      <div 
        class="absolute inset-0 bg-gradient-to-r from-primary to-blue-500 rounded-full transition-all duration-500"
        :style="{ width: completeness + '%' }"
      ></div>
      <div class="absolute inset-0 w-full h-full bg-[repeating-linear-gradient(45deg,transparent,transparent_10px,rgba(255,255,255,0.1)_10px,rgba(255,255,255,0.1)_20px)]"></div>
    </div>
    
    <div class="text-sm text-gray-600 font-medium mb-3">
      完善以下信息，提高简历完整度：
    </div>
    
    <div class="space-y-3">
      <div v-for="item in completenessItems" :key="item.id" :class="[
        'flex items-center p-2.5 rounded-lg',
        item.completed ? 'bg-green-50/50' : 'bg-red-50/50'
      ]">
        <div class="w-5 h-5 flex items-center justify-center mr-3">
          <i :class="item.completed ? 'ri-checkbox-circle-fill text-green-500' : 'ri-close-circle-fill text-red-500'"></i>
        </div>
        <span class="text-gray-700 flex-1">{{ item.label }}</span>
        <span v-if="item.completed" class="text-green-600 text-sm">已完成</span>
        <button v-else @click="completeItem(item.id)" class="text-primary text-sm hover:text-primary/80">去完善</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const completenessItems = ref([
  { id: 1, label: '添加自我评价', completed: true },
  { id: 2, label: '完善工作经历', completed: true },
  { id: 3, label: '上传作品集', completed: false },
  { id: 4, label: '添加项目经验', completed: true },
  { id: 5, label: '完善技能标签', completed: true }
])

const completeness = computed(() => {
  const completed = completenessItems.value.filter(item => item.completed).length
  return Math.round((completed / completenessItems.value.length) * 100)
})

const completeItem = (itemId: number) => {
  const item = completenessItems.value.find(item => item.id === itemId)
  if (item) {
    item.completed = true
    alert(`已完成：${item.label}`)
  }
}
</script>
